<template>
  <div class="card">
    <el-button type="primary" @click="dialogFormVisible = true" size="small"
      >添加客户</el-button
    >

    <el-dialog
      title="添加客户"
      :visible.sync="dialogFormVisible"
      class="creat-el-dialog"
      style="width: 60%; margin: 0 auto 50px"
      custom-class="el-dialog-mid"
    >
      <hr />
      <el-form
        :model="user"
        :rules="user"
        ref="user"
        label-width="85px"
        class="demo-user"
      >
        <el-form-item label="*客户身份:" prop="identity">
          <div class="topchange">
            <el-radio-group v-model="user.identity">
              <el-radio label="普通客户"></el-radio>
              <el-radio label="vip客户"></el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item
          label="姓名:"
          prop="name"
          :rules="[
            { required: true, message: '请输入姓名' },
            { type: 'string', message: '请输入正确姓名' },
          ]"
        >
          <div class="topchange">
            <el-input
              v-model="user.name"
              style="width: 300px"
              size="mini"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="电话号码:"
          prop="phone"
          :rules="[{ required: true, message: '请输入正确电话号码' }]"
        >
          <div class="topchange">
            <el-input
              v-model="user.phone"
              style="width: 300px"
              size="mini"
              placeholder="电话号码为11位"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="标签" prop="label">
          <el-select v-model="user.label" placeholder="标签">
            <el-option label="兴趣人群" value="兴趣人群"></el-option>
            <el-option
              label="新成交客户人群"
              value="新成交客户人群"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <div class="usersex">
            <el-radio-group v-model="user.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="备注:" prop="desc">
          <div class="topchange">
            <el-input
              type="textarea"
              style="width: 300px"
              size="mini"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="(dialogFormVisible = false), resetForm('user')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), submitForm(user)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<style lang='scss' scoped>
.el-dialog-mid {
  text-align: center;
}
.card {
  position: relative;
  .topchange {
    position: absolute;
  }
}
.dialog-footer {
  margin-top: -40px;
}
</style>
<script>
import { addcusApi } from "../http/httpUser";
export default {
  name: "creatCard",
  data() {
    return {
      dialogFormVisible: false,
      user: {
        id: "",
        identity: "",
        name: "",
        phone: "",
        sex: "",
        label: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    submitForm(user) {
      if (user.identity == "普通客户") {
        user.identity = false;
      } else {
        user.identity = true;
        user.card = "初级会员";
      }
      if (user.sex == "女") {
        user.sex = false;
      } else {
        user.sex = true;
      }
      user.phone = Number(user.phone);
      user.id = Number(user.id);
      console.log(user);
      addcusApi(user)
        .then((res) => {
          if (user.phone && res.data.code == 200) {
            this.$message.success("创建成功!");
            location.replace(location.href);
          } else {
            console.log(res);
            this.$message.error("创建失败,电话号码格式不正确或手机号码重复！");
          }
        })
        .catch(() => {});
      // 发送添加客户请求
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>